<template>
  <div class="app-container">
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0" style="margin-top: 10px">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            :show-overflow-tooltip="{ effect: 'light' }"
          >
            <el-table-column label="合同编号" prop="code" min-width="120" />
            <el-table-column label="姓名" prop="personName" min-width="100" />
            <el-table-column label="证件号码" prop="cardNumber" min-width="120" />
            <el-table-column label="所属企业" prop="corpName" min-width="120" />
            <el-table-column label="合同类型" prop="typeName" min-width="80" />
            <el-table-column label="合同签订日期" prop="signingDate" min-width="120" />
            <el-table-column label="合同终止日期" prop="endDate" min-width="120" />
            <el-table-column label="工资计算方式" prop="salaryCalculationMethodName" min-width="120" />
            <el-table-column label="工资标准" prop="wageStandard" min-width="80" />
            <el-table-column label="工资支付日期" prop="salaryPaymentDate" min-width="120" />
            <el-table-column label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button type="primary" link size="small" @click="handleDetail(scope.row)"> 查看详情 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <detail :dialog-detail="dialogDetail" @send-close="sendClose" />
    </div>
  </div>
</template>
<script setup lang="ts">
import detail from "./detail.vue";
import { QueryPersonContractPageByMemberId } from "@/api/contract/index";

const loading = ref(false);
const tableData = ref();

const dialogDetail = reactive({
  visible: false,
  id: undefined,
  title: "",
  projectId: undefined,
  corpId: undefined,
});

//声明变量
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);
//当前选中项
const tableRef = ref();

//查询条件
const queryForm = reactive<any>({});
const total = ref(0);

const sendClose = function (needRefresh: boolean) {
  dialogDetail.visible = false;
  dialogDetail.id = undefined;
  if (needRefresh) {
    handleQuery();
  }
};
//详情
const handleDetail = function (row: any) {
  dialogDetail.visible = true;
  dialogDetail.id = row.personId;
  dialogDetail.projectId = row.projectId;
  dialogDetail.corpId = row.corpId;
  dialogDetail.title = "详情";
};

//这是列表数据
const handleQuery = function () {
  loading.value = true;
  queryForm.memberId = id.value;
  QueryPersonContractPageByMemberId(queryForm)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableData.value = res.data;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
:deep(.el-button) {
  margin-left: 5px;
}
:deep(.el-input__wrapper) {
  border-radius: 0;
}
</style>
